/* hook组件 useState */
import React, {useState} from "react";
import {Button} from "antd";

/*
*   useState 自带了性能优化的机制
*       + 每一次修改状态值的时候，会拿最新要修改的值和之前的状态值作比较(基于 Object.is 作比较)
*       + 如果发现两次的值是一样的，也不会让视图更新(类似于 PurComponent，在shouldCompoenntupdate做了浅比较优化)
* */

const Demo = function () {
    console.log('render渲染')
    let [x, setX] = useState(10)
    console.log(x)
    const handle = () => {
        /* 执行10次，触发 1 次render，且拿到的上级上下文的x，只加1次 */
        // for (let i = 0; i < 10; i++) {
        //     setX(x + 1) // 这里拿到的 x 一定是上级的 x ,一直是改的是 11
        //     // 发现一直更新的是 11 ，useState 自带了性能优化的机制，只执行 一次 render
        //     flushSync()
        // }
        /* 需求1：更新 1次，x增加到 20 */
        for (let i = 0; i < 10; i++) {
            setX((prev) => {
                return prev + 1
            }) // 这里拿到的 x 一定是上级的 x ,一直是改的是 11
            // 发现一直更新的是 11 ，useState 自带了性能优化的机制，只执行 一次 render
            // flushSync()
        }
    }
    return <div className="demo">
        <span className="num">x:{x}</span>
        <Button type="primary" size="small" onClick={handle}>新增</Button>
    </div>
}

export default Demo